<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Get Utility: Getting CSS Style Sheets</title>
    

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css" id="styleoverrides">
	
	#container .hd {
		background-image:url(http://l.yimg.com/a/i/us/nt/ma/ma_nws_1.gif);
		background-position:top right;
		background-repeat:no-repeat;
		background-color:none;
	} 
	
	#container h2 {
		border:none;
		margin-top:0;
	}

	#container h3 {
		color:#999999;
	}
	
	#buttonContainer {
		padding-bottom:.5em;
	}
	
	#container .module {
		padding:.5em 1em 1em 1em;
		overflow:hidden;
	}

/*

    When we load the new CSS files, these files will be loaded above this style block.
    If we need to override any styles supplied by the new CSS files, we can do this
    here.  For instance, this is useful if you are loading YUI skin files dynamically,
    but want to override some of the styles.

*/
</style>

<!--end custom header content for this example-->


<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
	YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="vs" type="hidden" value="yuiblog.com">
		<div id="sitesearch">
			<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			<input type="text" id="searchinput" name="p">
			<input type="submit" value="Search" id="searchsubmit" class="ygbt">
		</div>
		</form>	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" height="38"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Get Utility: Getting CSS Style Sheets</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">

    
	<div class="promo">
	<h1>Get Utility: Getting CSS Style Sheets</h1>
	
	<div class="exampleIntro">
	<p><a href="http://developer.yahoo.com/yui/get">The YUI Get Utility</a> can be
used to fetch CSS stylesheets after the page has loaded.  This allows you to
reduce the size of your "main" stylesheet by segregating the style rules for
specific modules that may not be displayed when the page is first rendered.
Once the module is needed, you can bring in the CSS (and JavaScript)
dynamically using the Get Utility.</p>

<p>The example below demonstrates the dynamic addition and removal of three
stylesheets that change the appearance of the News module.  By clicking on the
buttons (which make use of the <a
href="http://developer.yahoo.com/yui/button/">YUI Button Control</a>), you can
add/remove border, background, and font treatments for the module.
(<strong>Note:</strong> The News module itself is built using the Get Utility
to fetch JSON data from the <a
href="http://developer.yahoo.com/search/news/V1/newsSearch.html">Yahoo! News
Search web service</a>; it follows the same code pattern described in the <a
href="get-script-basic.html">"Getting a Script Node with JSON Data"</a>
example.) </p>
			
	</div>	
					
	<div class="example-container module ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="get-css-basic_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->		
		</div>		<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="container">

    <div id="buttonContainer">
        <!--YUI Button instances, created from script, will go here.-->
    </div>

    <div class="module">
        <div class="hd"><h2>In the News:</h2></div>
        <div class="bd" id="results">
            <!--News stories will be displayed here.-->
        </div>
        <div class="ft">        
            <div id="searchControls">
                <!--Use a real form that works without JavaScript:-->
                <form method="GET" action="http://search.yahooapis.com/NewsSearchService/V1/newsSearch" id="newsSearch">            
                    <label for="searchString">Search Yahoo! News:</label> <input type="text" name="p" id="searchString" value="San Francisco" size="40">                
                    <input type="submit" id="getNewsData" value="Search Yahoo! News">                
                </form>            
            </div>
        </div>
    </div>
</div>

<script language="javascript">

// Encapsulating our code in a self-executing anonymous function
// is one way to create a namespace:
(function() {

// shortcuts and other variables:
var Button = YAHOO.widget.Button,
    Event = YAHOO.util.Event,
    Dom = YAHOO.util.Dom,
    Get = YAHOO.util.Get,
    elContainer = Dom.get("container"),
    tIds = {};

// YUI Buttons are attractive and effective for "call to action"
// tasks like the one here.  We'll create buttons purely from
// JavaScript; there's no need for this style-change functionality
// to be "accessible"; in fact, it's purely cosmetic, so keeping
// these buttons out of the page's initial DOM is preferable.  We'll
// use the "name" property of the button to determine what CSS to
// load when each button is clicked:
var borderButton = new Button({
    id: "borderButton",
    type: "checkbox",
    name: "border",
    label: "Border CSS",
    container: "buttonContainer" 
});
var backgroundButton = new Button({
    id: "backgroundButton",
    type: "checkbox",
    name: "background",
    label: "Background CSS",
    container: "buttonContainer"
});
var textButton = new Button({
    id: "textButton",
    type: "checkbox",
    name: "text",
    label: "Text CSS",
    container: "buttonContainer"
});
// Making available outside the anonymous function so these can be
// introspected in FireBug if desired:
YAHOO.example.buttons = [borderButton, backgroundButton, textButton];

// Checkbox buttons are either checked or unchecked; when their state
// changes, their "onCheckedChange" event fires.  We'll use that
// event to trigger the loading and unloading of CSS using the Get
// Utility.
var onCheckedChange = function() {
    //Which button was actuated?
    var name = this.get("name");
    //The button's checked state has already been updated, so if
    //true we load the necessary CSS:
    if(this.get("checked")) {
        // We'll use the 'data' parameter to pass through the name
        // of the CSS file to our onSuccess handler.  This allows
        // us to have access to the purge method when we want
        // to remove the CSS.
        //
        // In addition, we use the 'insertBefore' property to specify
        // the id of a style block we want to insert the new nodes
        // before.  By doing this, we can ensure that any style overrides
        // for the dynamically loaded CSS will be applied in the correct
        // order.
        Get.css("../get/assets/" + name + ".css", {
                data:         name,
                insertBefore: "styleoverrides",
                onSuccess:    onSuccess
        });
    } else {
        // In onSuccess, we save a reference to the callback object
        // in an associative array (tIds) indexed by the CSS name.  That 
        // allows us here, when the CSS needs to be removed, to simply
        // call the purge method corresponding to the item we want to 
        // remove.  Purge clears all the link nodes that were created
        // as part of the transaction (in this case, just a single 
        // link node).
        tIds[this.get("name")].purge();
        YAHOO.log("CSS was successfully purged; our object containing transaction ids now looks like this: " + YAHOO.lang.dump(tIds, 1),  "info", "example");
        
        // Some A-Grade browsers won't repaint automatically when CSS link nodes
        // are removed.  You can nudge these browsers to repaint by adding
        // a blank CSS stylesheet to the page:
        Get.css("../get/assets/neutral.css");
    }
};

// Now we can subscribe our onCheckedChange function to each
// of our three YUI Buttons' "checkedChange" event:
borderButton.on("checkedChange", onCheckedChange);
backgroundButton.on("checkedChange", onCheckedChange);
textButton.on("checkedChange", onCheckedChange);

// As noted above, in onSuccess we want to save the callback
// object in an associative array indexed by CSS file name so that
// we can purge the link nodes later if the CSS file needs to be
// removed.
var onSuccess = function(o) {
    tIds[o.data] = o;
    YAHOO.log("CSS was successfully returned; our object containing transaction ids now looks like this: " + YAHOO.lang.dump(tIds, 1), "info", "example");
}

})();
</script>

<script src="../get/assets/getNews.js" type="text/javascript"></script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">Using the Get Utility to Add/Remove CSS Stylesheets:</h2>

<p>In this example, clicking on the <a href="http://developer.yahoo.com/yui/button/">YUI Buttons</a> at the top of the News module adds or removes a CSS stylesheet.  The stylesheets are added and purged on-demand by the <a href="http://developer.yahoo.com/yui/get/">YUI Get Utility</a>.  This technique allows you defer the loading of some of your CSS style rules until after the initial page load &nbsp; ideally, you defer their loading until they're needed...and if they're never needed, they never need to load.  There are two performance wins here: Less CSS needs to load up front, which makes the page load more quickly, and there are fewer CSS rules in play which makes the page easier for the browser to render and manipulate.  In practice, you'd never want to implement this technique in a situation as simple as the one described in this example &nbsp; it would be much more efficient, with simple rules, to include everything on the page in the initial load.  But in a more complex application, the deferred loading of some CSS can be helpful. (<strong>Note:</strong> This example also illustrates the use of the Get Utility's <code>purge</code> method for removing CSS link nodes from the page.  While <code>purge</code> causes an immediate repaint in some <a href="http://developer.yahoo.com/yui/articles/gbs/">A-Grade browsers</a>, others need to be prodded to repaint.  While we've illustrated one way to do this here, the use of <code>purge</code> remove stylesheets on the fly is not a light technique.  Use it with discretion.)</p>

<p>This example has the following dependencies:</p>

<textarea name="code" class="HTML" cols="60" rows="1"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/get/get.js"></script></textarea>

<p>We start with a simple form on the page that will post to the <a href="http://news.search.yahoo.com/news/advanced">Yahoo! News Search engine</a>; if JavaScript is not enabled, the user will still be able to use the functionality of the News module.  A placeholder is added for the YUI Buttons that we'll add via script.  Those buttons do not need to be part of the page markup, because they aren't required for the core functionality of the page...they just control the CSS addition and removal, which in this case is cosmetic.</p>

<textarea name="code" class="HTML" cols="60" rows="1"><div id="container">
    <div id="buttonContainer">
        <!--YUI Button instances, created from script, will go here.-->
    </div>

    <div class="module">
        <div class="hd"><h2>In the News:</h2></div>
        <div class="bd" id="results">
            <!--News stories will be displayed here.-->
        </div>
        <div class="ft">        
            <div id="searchControls">
                <!--Use a real form that works without JavaScript:-->
                <form method="GET" action="http://search.yahooapis.com/NewsSearchService/V1/newsSearch" id="newsSearch">            
                    <label for="searchString">Search Yahoo! News:</label> <input type="text" name="p" id="searchString" value="San Francisco" size="40">                
                    <input type="submit" id="getNewsData" value="Search Yahoo! News">                
                </form>            
            </div>
        </div>
    </div>
</div></textarea>

<p>With the markup in place, we can now create our YUI Buttons.  We'll use Buttons of type <code>checkbox</code>; these can be clicked on or off to add/remove their corresponding CSS stylesheets.  The <code>name</code> property of each Button will be used to identify the specific CSS stylesheet that the Button controls.</p>

<textarea name="code" class="JScript" cols="60" rows="1">// YUI Buttons are attractive and effective for "call to action"
// tasks like the one here.  We'll create buttons purely from
// JavaScript; there's no need for this style-change functionality
// to be "accessible"; in fact, it's purely cosmetic, so keeping
// these buttons out of the page's initial DOM is preferable.  We'll
// use the "name" property of the button to determine what CSS to
// load when each button is clicked:
var borderButton = new Button({
    id: "borderButton",
    type: "checkbox",
    name: "border",
    label: "Border CSS",
    container: "buttonContainer" 
});
var backgroundButton = new Button({
    id: "backgroundButton",
    type: "checkbox",
    name: "background",
    label: "Background CSS",
    container: "buttonContainer"
});
var textButton = new Button({
    id: "textButton",
    type: "checkbox",
    name: "text",
    label: "Text CSS",
    container: "buttonContainer"
});</textarea>

<p>The Get Utility is invoked when a Button's <code>checked</code> state changes; this could happen via a click or by tabbing to a Button and pressing <code>return</code> or <code>enter</code>.  When that happens, the Button's <code>onCheckedChange</code> event fires.  At that point, we determine whether the new button state is checked (in which case we bring in the related CSS file) or unchecked (in which case we purge the related CSS file).</p>

<textarea name="code" class="JScript" cols="60" rows="1">// Checkbox buttons are either checked or unchecked; when their state
// changes, their "onCheckedChange" event fires.  We'll use that
// event to trigger the loading and unloading of CSS using the Get
// Utility.
var onCheckedChange = function() {
    // Which button was actuated?
    var name = this.get("name");
    // The button's checked state has already been updated, so if
    // true we load the necessary CSS:
    if(this.get("checked")) {
        // We'll use the 'data' parameter to pass through the name
        // of the CSS file to our onSuccess handler.  This allows
        // us to have access to the purge method when we want
        // to remove the CSS.
        //
        // In addition, we use the 'insertBefore' property to specify
        // the id of a style block we want to insert the new nodes
        // before.  By doing this, we can assure that any style overrides
        // for the dynamically loaded CSS will be applied in the correct
        // order.
        Get.css("../get/assets/" + name + ".css", {
                data:         name,
                insertBefore: "styleoverrides",
                onSuccess:    onSuccess
        });
    } else {
        // In onSuccess, we save a reference to the callback object
        // in an associative array (tIds) indexed by the CSS name.  That 
        // allows us here, when the CSS needs to be removed, to simply
        // call the purge method corresponding to the item we want to 
        // remove.  Purge clears all the link nodes that were created
        // as part of the transaction (in this case, just a single 
        // link node).
        tIds[this.get("name")].purge();
        YAHOO.log("CSS was successfully purged; our object " +
                  "containing transaction ids now looks like " +
                  "this: " + YAHOO.lang.dump(tIds),  "info", "example");

        // Some A-Grade browsers won't repaint automatically when CSS link nodes
        // are removed.  You can nudge these browsers to repaint by adding
        // a blank CSS stylesheet to the page:
        Get.css("../get/assets/neutral.css");
    }
};

// Now we can subscribe our onCheckedChange function to each
// of our three YUI Buttons' "checkedChange" event:
borderButton.on("checkedChange", onCheckedChange);
backgroundButton.on("checkedChange", onCheckedChange);
textButton.on("checkedChange", onCheckedChange);</textarea>

<p>In the codeblock above, we call the <code>purge</code> method to remove CSS files when Buttons are unchecked.  The <code>purge</code> function is part of <a href="http://developer.yahoo.com/yui/get/#args">the callback object</a> passed to the <code>onSuccess</code> or <code>onFailure</code> handler registered with the Get Utilty when the <code>css</code> method is called.  In our <code>onSuccess</code> handler, we will save that callback object in an associative array so we can access <code>purge</code> as needed when a Button is unchecked: </p>

<textarea name="code" class="JScript" cols="60" rows="1">// As noted above, in onSuccess we want to save the callback
// object in an associative array indexed by CSS file name so that
// we can purge the link nodes later if the CSS file needs to be
// removed.
var onSuccess = function(o) {
    tIds[o.data] = o;
    YAHOO.log("CSS was successfully returned; our object " + 
              "containing transaction ids now looks like " + 
              "this: " + YAHOO.lang.dump(tIds), "info", "example");
}

})();</textarea>

<p>The full JavaScript code for the CSS portion of this example is as follows:</p>

<textarea name="code" class="JScript" cols="60" rows="1">//Encapsulating our code in a self-executing anonymous function
// is one way to create a namespace:
(function() {

// shortcuts and other variables:
var Button = YAHOO.widget.Button,
    Event = YAHOO.util.Event,
    Dom = YAHOO.util.Dom,
    Get = YAHOO.util.Get,
    elContainer = Dom.get("container"),
    tIds = {};

// YUI Buttons are attractive and effective for "call to action"
// tasks like the one here.  We'll create buttons purely from
// JavaScript; there's no need for this style-change functionality
// to be "accessible"; in fact, it's purely cosmetic, so keeping
// these buttons out of the page's initial DOM is preferable.  We'll
// use the "name" property of the button to determine what CSS to
// load when each button is clicked:
var borderButton = new Button({
    id: "borderButton",
    type: "checkbox",
    name: "border",
    label: "Border CSS",
    container: "buttonContainer" 
});
var backgroundButton = new Button({
    id: "backgroundButton",
    type: "checkbox",
    name: "background",
    label: "Background CSS",
    container: "buttonContainer"
});
var textButton = new Button({
    id: "textButton",
    type: "checkbox",
    name: "text",
    label: "Text CSS",
    container: "buttonContainer"
});
// Making available outside the anonymous function so these can be
// introspected in FireBug if desired:
YAHOO.example.buttons = [borderButton, backgroundButton, textButton];

// Checkbox buttons are either checked or unchecked; when their state
// changes, their "onCheckedChange" event fires.  We'll use that
// event to trigger the loading and unloading of CSS using the Get
// Utility.
var onCheckedChange = function() {
    // Which button was actuated?
    var name = this.get("name");
    // The button's checked state has already been updated, so if
    // true we load the necessary CSS:
    if(this.get("checked")) {
        // We'll use the 'data' parameter to pass through the name
        // of the CSS file to our onSuccess handler.  This allows
        // us to have access to the purge method when we want
        // to remove the CSS.
        //
        // In addition, we use the 'insertBefore' property to specify
        // the id of a style block we want to insert the new nodes
        // before.  By doing this, we can assure that any style overrides
        // for the dynamically loaded CSS will be applied in the correct
        // order.
        Get.css("../get/assets/" + name + ".css", {
                data:         name,
                insertBefore: "styleoverrides",
                onSuccess:    onSuccess
        });
    } else {
        // In onSuccess, we save a reference to the callback object
        // in an associative array (tIds) indexed by the CSS name.  That 
        // allows us here, when the CSS needs to be removed, to simply
        // call the purge method corresponding to the item we want to 
        // remove.  Purge clears all the link nodes that were created
        // as part of the transaction (in this case, just a single 
        // link node).
        tIds[this.get("name")].purge();
        YAHOO.log("CSS was successfully purged; our object " +
                  "containing transaction ids now looks like " +
                  "this: " + YAHOO.lang.dump(tIds),  "info", "example");
    }
};

// Now we can subscribe our onCheckedChange function to each
// of our three YUI Buttons' "checkedChange" event:
borderButton.on("checkedChange", onCheckedChange);
backgroundButton.on("checkedChange", onCheckedChange);
textButton.on("checkedChange", onCheckedChange);

// As noted above, in onSuccess we want to save the callback
// object in an associative array indexed by CSS file name so that
// we can purge the link nodes later if the CSS file needs to be
// removed.
var onSuccess = function(o) {
    tIds[o.data] = o;
    YAHOO.log("CSS was successfully returned; our object " +
              "containing transaction ids now looks like " +
              "this: " + YAHOO.lang.dump(tIds), "info", "example");
}

})();</textarea>

<h2>Configuration for This Example</h2>

<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers.  <a href="http://developer.yahoo.com/yui/articles/hosting/?button&dom&get&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>

				</div>
				<div class="yui-u">
						<div id="loggerModule" class="yui-skin-sam">
						<h3 class="firstContent">YUI Logger Output:</h3>
								<div id="loggerDiv"></div>
						</div>
					
				
					<div id="examples">
						<h3>Get Utility Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../get/get-script-simple.html'>Quickstart Example: Getting a Script File with YUI Get</a></li><li><a href='../get/get-script-basic.html'>Getting a Script Node with JSON Data from a Web Service</a></li><li class='selected'><a href='../get/get-css-basic.html'>Getting CSS Style Sheets</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager)</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Get Utility Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/get/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_get.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/get.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="selected "><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
